<template>
  <div>
    <header>
      <van-nav-bar>
        <template #left>
          <van-icon
            name="arrow-left"
            size="26"
            color="black"
            @click="$router.go(-2)"
          />
        </template>
        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
            theme="dark"
          >
            <template #reference>
              <van-icon name="ellipsis" size="26" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </header>
    <main>
      <div class="pay">
        <div>
          <van-icon name="checked" size="36" color="red" />
          <h2>支付成功</h2>
        </div>
        <div>
          <van-button round type="info" color="#aaa" plain @click="$router.push('/home')">返回首页</van-button>
          <van-button round type="info" color="#aaa" plain @click="$router.push('/orderlist')">查看订单</van-button>
        </div>
        <div>
          <van-divider
            :style="{
              color: '#000',
              borderColor: '#fff',
              padding: '0 16px',
            }"
          >
            本次下单可享权益
          </van-divider>
          <img src="https://img30.360buyimg.com/vip/jfs/t1/148132/11/3938/169807/5f1e8997Ee3c6e25e/ee0dc166a52bd448.png!q70.webp" alt="">
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPopover: false,
      actions: [
        { text: "返回首页", icon: "wap-home-o" },
        { text: "分类搜索", icon: "apps-o" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "我的京东", icon: "contact" },
        { text: "浏览记录", icon: "eye-o" },
      ],
    };
  },
  methods: {
    onSelect(action, index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.$router.push("/kind");
          break;
        case 2:
          this.$router.go(0);
          break;
        case 3:
          this.$router.push("/my");
          break;
        case 4:
          this.$router.push("/kind");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style scoped>
.pay div:nth-child(1) {
  display: flex;
  justify-content: center;
  padding: 0.1rem 0;
}
.pay div:nth-child(1) h2 {
  margin: 0 0.02rem;
  font-weight: 600;
}
.pay div:nth-child(2) {
  display: flex;
  justify-content: center;
  padding: 0.1rem 0;
}
::v-deep .van-button {
  margin: 0 0.2rem;
  width: 1rem;
}
.pay div:nth-child(3) img{
  width: 100%;
}
</style>